<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九分区网页布局</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        /* 选中所有类名为 container 的元素 */
        .container {
            /* 将元素的显示方式设置为 flex，使其成为一个弹性容器。
               弹性容器会启用 Flexbox 布局模型，该模型可以更方便地实现元素的排列、对齐和空间分配。 */
            display: flex;
            /* 将元素的高度设置为 100vh。vh 是视口高度（viewport height）的相对单位，1vh 等于视口高度的 1%。
               因此，100vh 表示元素的高度会占满整个浏览器视口的高度。 */
            height: 100vh;
        }
        /* 同时选中类名为 left、middle 和 right 的元素 */
        .left, .middle, .right {
            /* flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写，这里 flex: 1 等价于
               flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
               表示这些元素在弹性容器（即 .container 元素）中会平均分配剩余空间。
               由于它们的 flex-grow 值都为 1，所以在水平方向上，这三个元素会占据相同的宽度。 */
            flex: 1;
            /* 将元素的显示方式设置为 flex，使其成为弹性容器。
               这意味着这些元素内部的子元素可以使用 Flexbox 布局进行排列。 */
            display: flex;
            /* 设置弹性容器内子元素的排列方向为垂直方向，即子元素会从上到下依次排列。 */
            flex-direction: column;
        }
        .left {
            flex: 0.25;
        }
        /* 选中所有类名为 middle 的元素 */
        .middle {
            /* flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写，这里 flex: 0.5 等价于
               flex-grow: 0.5; flex-shrink: 1; flex-basis: 0%;
               表示该元素在弹性容器中分配剩余空间时，其增长系数为 0.5。
               在 .container 这个弹性容器里，.left、.middle 和 .right 元素会按各自的 flex 值分配宽度，
               由于 .left 和 .right 的 flex 值为 0.25，.middle 的 flex 值为 0.5，
               所以 .middle 元素宽度会是 .left 或 .right 元素宽度的两倍 */
            flex: 0.5;
            /* 为类名为 middle 的元素设置背景颜色为十六进制颜色值 #cccccc，即浅灰色 */
            background-color: #cccccc;
        }
        .right {
            flex: 0.25;
        }
        .top, .center, .bottom {
            flex: 1;
            border: 1px dashed #000;
        }
        .top {
            flex: 0.1;
        }
        .center {
            flex: 0;
            min-height: 1400px; /* 确保中间区域高度超过 1400px */
        }
        .bottom {
            flex: 0.3;
        }
        .center-item {
            height: calc(100% / 70);
            box-sizing: border-box;
            position: relative;
            display: flex;
            /* 添加底部边框作为细线 */
            border-bottom: 1px solid #000;
        }
        .center-item:nth-child(even) {
            background-color: #ffffff;
        }
        .center-item:nth-child(odd) {
            background-color: #f0f0f0;
        }
        .left-bar {
            position: absolute;
            right: 0;
            height: 100%;
            background-color: blue;
        }
        .right-bar {
            position: absolute;
            left: 0;
            height: 100%;
            background-color: red;
        }
        .middle-bar {
            flex: 1;
            background-color: #ffb6c1;
            margin: 0 1px;
        }
        .sub-space {
            box-sizing: border-box;
            border-right: 1px solid #000; /* 添加右侧细竖线 */
            float: left; /* 让子空间水平排列 */
            width: calc(100% / 10); /* 确保每个子空间宽度相等 */
            height: 100%; /* 确保高度占满父容器 */
        }
        /* 移除最后一个子空间的右侧边框，避免多余线条 */
        .sub-space:last-child {
            border-right: none;
        }
        .sub-space-bar {
            box-sizing: border-box;
            border: 1px solid white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            <div class="top">左-上
                <button onclick="changeHeight()">随机改变高度</button>
            </div>
            <div class="center">
                <!-- 左-中区域 -->
                <script>
                    const leftCenter = document.querySelector('.left .center');
                    for (let i = 0; i < 70; i++) {
                        const item = document.createElement('div');
                        item.classList.add('center-item');
                        leftCenter.appendChild(item);
                        const bar = document.createElement('div');
                        bar.classList.add('left-bar');
                        // 随机生成宽度
                        const randomWidth = Math.floor(Math.random() * 100) + 'px';
                        bar.style.width = randomWidth;
                        item.appendChild(bar);
                    }
                </script>
            </div>
            <div class="bottom">左-下</div>
        </div>
        <div class="middle">
            <div class="top">中-上</div>
            <div class="center">
                <!-- 中-中区域 -->
                <script>
                    // 找到中-中区域
                    const middleCenter = document.querySelector('.middle .center');
                    // 生成 70 行
                    for (let i = 0; i < 70; i++) {
                        const centerItem = document.createElement('div');
                        centerItem.classList.add('center-item');
                        if (i % 2 === 0) {
                            centerItem.style.backgroundColor = '#ffffff';
                        } else {
                            centerItem.style.backgroundColor = '#f0f0f0';
                        }
                        // 在每个区域内创建 10 个子空间
                        for (let j = 0; j < 10; j++) {
                            const subSpace = document.createElement('div');
                            subSpace.classList.add('sub-space');
                            if (j % 2 === 0) {
                                subSpace.style.backgroundColor = '#ffffff';
                            } else {
                                subSpace.style.backgroundColor = '#f7f7f7';
                            }
                            // 修改子空间样式，高度占满父容器，宽度平均分配
                            subSpace.style.width = 'calc(100% / 10)';
                            subSpace.style.height = '100%';
                            // 在每个子空间里绘制三个柱状图
                            for (let k = 0; k < 3; k++) {
                                const bar = document.createElement('div');
                                bar.classList.add('sub-space-bar');
                                // 设置宽度为子空间的三分之一
                                bar.style.width = 'calc(100% / 3)';
                                // 生成随机高度，范围是 0 到子空间的高度
                                const randomHeight = Math.random() * 100;
                                bar.style.height = `${randomHeight}%`;
                                bar.style.backgroundColor = 'blue'; // 可自定义柱状图颜色
                                bar.style.position = 'absolute';
                                bar.style.bottom = '0';
                                bar.style.left = `${k * (100 / 3)}%`;
                                subSpace.appendChild(bar);
                            }
                            subSpace.style.position = 'relative'; // 确保柱状图定位正确
                            centerItem.appendChild(subSpace);
                        }
                        middleCenter.appendChild(centerItem);
                    }
                </script>
            </div>
            <div class="bottom">中-下</div>
        </div>
        <div class="right">
            <div class="top">右-上</div>
            <div class="center">
                <!-- 右-中区域 -->
                <script>
                    const rightCenter = document.querySelector('.right .center');
                    for (let i = 0; i < 70; i++) {
                        const item = document.createElement('div');
                        item.classList.add('center-item');
                        rightCenter.appendChild(item);
                        const bar = document.createElement('div');
                        bar.classList.add('right-bar');
                        // 随机生成宽度
                        const randomWidth = Math.floor(Math.random() * 100) + 'px';
                        bar.style.width = randomWidth;
                        item.appendChild(bar);
                    }
                </script>
            </div>
            <div class="bottom">右-下</div>
        </div>
    </div>

    <script>
        function changeHeight() {
            const items = document.querySelectorAll('.center-item');
            items.forEach(item => {
                // 尝试选择 .left-bar
                const leftBar = item.querySelector('.left-bar');
                if (leftBar) {
                    // 随机生成宽度
                    const randomWidth = Math.floor(Math.random() * 100) + 'px';
                    leftBar.style.width = randomWidth;
                }

                // 尝试选择 .right-bar
                const rightBar = item.querySelector('.right-bar');
                if (rightBar) {
                    // 随机生成宽度
                    const randomWidth = Math.floor(Math.random() * 100) + 'px';
                    rightBar.style.width = randomWidth;
                }

                // 处理中间区域的子空间柱状图
                const subSpaces = item.querySelectorAll('.sub-space');
                subSpaces.forEach(subSpace => {
                    const bars = subSpace.querySelectorAll('.sub-space-bar');
                    bars.forEach(bar => {
                        // 生成随机高度，范围是 0 到子空间的高度
                        const randomHeight = Math.random() * 100;
                        bar.style.height = `${randomHeight}%`;
                    });
                });
            });
        }
    </script>
</body>
</html>